<template>
	<transition name="slide">
<<<<<<< HEAD
		<div class="singer-detail">
			<music-list :bgImg='bgImage' :title='title' :songs='songs'></music-list>
		</div>
	</transition>

=======
		<music-list :songs="songs" :title="title" :bgImage="bgImage"></music-list>
	</transition>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getSingerDetail } from 'api/singer'
<<<<<<< HEAD
	import { createSong } from 'assets/js/songs'
	import MusicList from 'components/music-list/music-list'

	export default {
		data(){
			return {
				songs:[]
			}
		},
		mounted(){
=======
	import { createSong } from 'assets/js/song'
	import MusicList from 'components/music-list/music-list'

	export default {
		created(){
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
			this._getDetail()
		},
		computed:{
			title(){
				return this.singer.name
			},
			bgImage(){
				return this.singer.imgUrl
			},
			...mapGetters([
				'singer'
			])
		},
<<<<<<< HEAD
=======
		data(){
			return {
				songs:[]
			}
		},
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		methods:{
			_getDetail(){
				if(!this.singer.id){
					this.$router.push({
<<<<<<< HEAD
						path:'/singer'
					})
					return ;
				}
				getSingerDetail(this.singer.id).then((res)=>{
					// console.log(this.singer)
					if(res.code == 0){
						this.songs = this._parseSongList(res.data.list)
						// console.log(this.songs)			
=======
						path:"/singer"
					})
					return
				}
				getSingerDetail(this.singer.id).then((res)=>{
					if(res.code == 0){
						this.songs = this._parseSongList(res.data.list)
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
					}
				})
			},
			_parseSongList(list){
<<<<<<< HEAD
				let arr = [];
				list.forEach((item)=>{
					if(item.musicData.songid && item.musicData.albummid){
						arr.push(createSong(item.musicData))
					}
					// console.log(item)
=======
				let arr = []
				list.forEach((item)=> {
					if(item.musicData.songid && item.musicData.albummid){
						arr.push(createSong(item.musicData))
					}
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
				})
				return arr
			}
		},
		components:{
			MusicList
		}
	}

</script>

<style scoped lang="less">
	 @import "~assets/less/variable";

<<<<<<< HEAD
	.singer-detail {
=======
	/* .singer-detail {
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		position: fixed;
		z-index: 100;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color: @color-background;
<<<<<<< HEAD
	}
=======
	} */
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
	
	.slide-enter-active,.slide-leave-active {
		transition:all 0.3s;
	}
	.slide-enter,.slide-leave-to {
		transform: translate3d(100%,0,0);
	}
</style>